<template>
  <!-- 管控排查 -->
  <view class="controlCheck-container">
    <component
      v-bind:is="currentTabComponent"
      :data="listData"
      :riskIdentificationId="riskIdentificationId"
      :positionCheckObj="positionCheckObj"
      v-if="listData.length > 0"
    ></component>
    <view v-else>
      <Empty />
    </view>
  </view>
</template>

<script>
import { myTaskByRiskId, getPositionCheck } from '@/api/dbd/controlCheck.js'
import Empty from '@/components/cu-empty/index.vue'
import Task from './components/task.vue'

export default {
  components: {
    Empty,
    Task
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },

  data() {
    return {
      textColor: true,
      listData: [],
      pageNum: 1,
      total: null,
      riskIdentificationId: '',
      tabBars: [
        {
          name: '排查任务',
          componentName: 'Task',
          index: 0
        }
      ],
      tabIndex: 0,
      taskSearchParams: undefined,
      recordSearchParams: undefined,
      positionCheckObj: {
        code: '',
        title: ''
      }
    }
  },
  onLoad({ riskIdentificationId }) {
    this.riskIdentificationId = riskIdentificationId
  },
  onShow() {
    if (this.riskIdentificationId) {
      this.initData()
      this.positionCheck()
    }
  },
  onPullDownRefresh() {
    this.initData()
    this.positionCheck()
  },
  methods: {
    initData() {
      this.pageNum = 1
      this.total = null
      this.getlist()
    },
    getlist() {
      myTaskByRiskId(this.riskIdentificationId).then((res) => {
        this.listData = res.data
        uni.stopPullDownRefresh()
      })
    },
    positionCheck() {
      getPositionCheck(this.riskIdentificationId).then((res) => {
        this.positionCheckObj = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
